<template>
  <div>
    <van-nav-bar>
      <template #left>
        <van-icon @click="goindex" name="cross" size="20" color="#000" />
      </template>
    </van-nav-bar>
    <div class="contentg">
      <van-uploader
        :after-read="afterRead"
        v-model="filList"
        multiple
        :max-count="picnum"
        :before-read="beforeRead"
      >
      </van-uploader>
      <van-field
        v-model="data.message"
        rows="2"
        autosize
        type="textarea"
        maxlength="150"
        placeholder="请输入您精美的文案吧！"
        show-word-limit
      />
      <van-cell @click="popupshow = true">
        <template #title>
          <div class="flebox">
            <img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/gods.png"
              alt=""
            />
            <span>宝贝</span>
            <van-badge
              v-if="num > 0"
              :content="num"
              color="#1989fa"
            ></van-badge>
          </div>
        </template>
        <template #right-icon>
          <div v-if="godlist.length > 0">
            <img
              v-for="item in godlist.slice(0, 2)"
              :key="item.orderID"
              class="goodimg"
              :src="item.GoodsPic"
              alt=""
            />
          </div>

          <span v-else style="color: #cccccc">可关联已买过的商品</span>
          <van-icon name="arrow" class="search-icon" />
        </template>
      </van-cell>
      <van-cell @click="sheetShow = true">
        <template #title>
          <div class="flebox">
            <img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/fenlei.png"
              alt=""
            />
            <span>分类</span>
          </div>
        </template>
        <template #right-icon>
          <van-tag mark plain v-if="data.type !== ''" type="primary"
            >#{{ data.type }}</van-tag
          >
          <van-icon name="arrow" class="search-icon" />
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <div class="flebox">
            <img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/huati.png"
              alt=""
            />
            <span>话题</span>
          </div>
        </template>
        <template #right-icon>
          <van-icon name="arrow" class="search-icon" />
        </template>
      </van-cell>
      <van-cell @click="addressShow = true">
        <template #title>
          <div class="flebox">
            <img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/dizi.png"
              alt=""
            />
            <span>分享地址</span>
          </div>
        </template>
        <template #right-icon>
          <van-tag v-if="data.address != ''" color="#7232dd" plain
            ><van-icon name="location-o" />{{ data.address }}</van-tag
          >
          <van-icon name="arrow" class="search-icon" />
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <div class="flebox">
            <img
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/huati.png"
              alt=""
            />
            <span>为你的文案选择一个精美的封面吧！</span>
          </div>
        </template>
        <template #right-icon>
          <van-icon name="arrow-down" class="search-icon" />
        </template>
      </van-cell>
      <van-uploader
        style="margin-top: 10px"
        v-model="filList2"
        multiple
        :after-read="afterRead2"
        :before-read="beforeRead2"
        :max-count="1"
        ><template #preview-cover="">
          <div class="preview-cover van-ellipsis"></div> </template
      ></van-uploader>
    </div>

    <van-goods-action style="padding: 10px">
      <van-goods-action-button
        @click="Posted"
        color="#7232dd"
        type="danger"
        text="发布"
      />
    </van-goods-action>
    <van-action-sheet
      v-model="sheetShow"
      :actions="actions"
      @select="option"
      cancel-text="取消"
      description="为您的文案选择一个分类吧，让更多人一起分享！"
      close-on-click-action
    />
    <van-popup
      v-model="popupshow"
      round
      position="bottom"
      :style="{ height: '90%' }"
    >
      <van-cell v-for="item in goodsList" clickable :key="item.orderID">
        <template #title>
          <div class="titel_left">
            <lazy-component style="width: 90px; height: 41px">
              <img v-lazy="item.GoodsPic" alt="" />
            </lazy-component>

            <div class="name_l">
              <p>{{ item.GoodName }}</p>
              <p class="price">￥{{ item.GoodsPrice }}.00</p>
            </div>
          </div>
        </template>
        <template #right-icon>
          <van-checkbox
            @change="chnageitem(item.chekState)"
            v-model="item.chekState"
            ref="checkboxes"
          />
        </template>
      </van-cell>

      <div style="height: 3.85rem" class="hbox"></div>

      <van-goods-action style="padding: 10px">
        <van-goods-action-button @click="onSubmit" type="danger" text="确定" />
      </van-goods-action>
    </van-popup>
    <!-- 地址选择 -->
    <van-popup
      v-model="addressShow"
      round
      position="bottom"
      :style="{ height: '50%' }"
      ><van-area
        @confirm="addssOk"
        title="选择地址"
        :area-list="areaList"
        :columns-num="2"
    /></van-popup>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { mapState } from "vuex";
import { upload } from "../../utils/Fileupload";
export default {
  data() {
    return {
      filList: [],
      filList2: [],
      picnum: 3,
      areaList,
      radio: "0",
      type: "",
      popupshow: false,
      sheetShow: false,
      addressShow: false,
      actions: [
        { name: "穿搭" },
        { name: "家具" },
        { name: "数码" },
        { name: "美食" },
        { name: "美妆" },
        { name: "科技" },
        { name: "生活" },
      ],
      result: [],
      list: ["穿搭", "数码"],
      goodsList: [],
      count: 0,
      flag: true,
      num: 0,
      godlist: [],
      data: {
        message: "",
        GoodName: "",
        GoodsPic: "",
        GoodsID: "",
        address: "",
        type: "",
        MediaType: "",
        Media: "",
        Cover: "",
        userID: 0,
        userHeard: "",
        userName: "",
        date: "",
      },
      fliearr: [],
      status: 0,
      coverFile: "",
    };
  },
  created() {
    this.getPurchasedBefore();
  },
  methods: {
    option(val) {
      this.data.type = val.name;
    },
    goindex() {
      this.$router.push("/discove");
    },

    chnageitem(val) {
      console.log(val);
    },
    //获取购买过的商品
    async getPurchasedBefore() {
      const { data: res } = await this.$http.get("getPurchasedBefore", {
        params: { id: this.emailLogin[0].userID },
      });
      res.data.forEach((item) => {
        item.chekState = item.chekState == 0 ? false : true;
      });
      this.goodsList = res.data;
    },
    onSubmit() {
      let arr = [];
      this.goodsList
        .filter((x) => x.chekState == true)
        .forEach((x) => {
          let data = {
            GoodName: x.GoodName,
            GoodsPic: x.GoodsPic,
            GoodsID: x.GoodsID,
          };

          arr.push(data);
        });
      arr.forEach((x) => {
        x.GoodName = x.GoodName + " ";
        x.GoodsID = x.GoodsID + " ";
      });

      this.godlist = arr;
      this.num = this.godlist.length;
      this.popupshow = false;
      console.log(arr);
    },
    // 上传文案图片
    afterRead(file) {
      this.data.MediaType = "图片";

      this.fliearr.push(file);
    },
    beforeRead(file) {
      if (file.type === "video/mp4") {
        this.$toast("请上传图片");
        return false;
      }
      return true;
    },
    afterRead2(file) {
      console.log(file);
      this.coverFile = file;
      this.data.Cover = file.file.name;
    },
    beforeRead2(file) {
      if (file.type === "video/mp4") {
        this.$toast("请上传图片");
        return false;
      }
      return true;
    },
    addssOk(val) {
      this.addressShow = false;
      this.data.address = val[1].name;
      console.log(this.data.address);
    },
    Posted() {
      if (this.filList.length == 0) {
        this.$toast("请为您的文案配上图片吧！");
      } else if (this.data.message === "") {
        this.$toast("请输入文案！");
      } else if (this.data.message.length < 10) {
        this.$toast("文案不能少于十个字符！");
      } else {
        this.uploadImg();

        this.$toast.loading({
          forbidClick: true,
          message: "正在发布...",
          loadingType: "spinner",
        });
        setTimeout(() => {
          this.Getsubmit();
        }, 1500);
      }
    },
    Getsubmit() {
      this.godlist.forEach((x) => {
        this.data.GoodName += x.GoodName;
        this.data.GoodsPic += x.GoodsPic + " ";
        this.data.GoodsID += x.GoodsID;
      });

      let url = "Videonumber";
      upload.uploadChange(this.coverFile, url);
      this.publishVideo();
    },
    async publishVideo() {
      this.data.userID = this.emailLogin[0].userID;
      this.data.userHeard = this.emailLogin[0].userImg;
      this.data.userName = this.emailLogin[0].Nickname;
      this.data.date = new Date();
      console.log(this.data);
      const { data: res } = await this.$http.post("publishVideo", this.data);
      if (res.status == 200) {
        this.fliearr = [];
        this.data.GoodName = "";
        this.data.message = "";
        this.data.GoodsID = "";
        this.data.GoodsID = "";
        this.data.MediaType = "";
        this.data.Media = "";
        this.data.Cover = "";
        this.filList2 = [];
        this.filList = [];
        this.godlist = [];
        this.data.address = "";
        this.data.type = "";
        this.num = 0;
        this.goodsList.forEach((item) => {
          item.chekState = false;
        });
        this.$toast.success("发布成功！");
        this.$router.push("/discove");
      }
    },
    uploadImg() {
      var that = this;
      for (var i = 0; i < this.fliearr.length; i++) {
        let url = "Videonumber";
        upload.uploadChange(this.fliearr[i], url);
        this.data.Media += this.fliearr[i].file.name + " ";
      }
    },
    uploadCover() {},
  },
  computed: {
    ...mapState(["emailLogin"]),
  },
};
</script>

<style lang="less" scoped>
.contentg {
  padding: 12px;
}
.search-icon {
  font-size: 17px;
  line-height: inherit;
}
.flebox {
  display: flex;
  align-items: center;
  img {
    width: 25px;
    height: 25px;
    margin-right: 5px;
  }
}
.titel_left {
  display: flex;
  align-items: center;
  img {
    width: 40px;
    height: 40px;
  }
  .name_l {
    margin-left: 11px;
    text-align: left;
    line-height: 21px;
    p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
  .price {
    color: #f9410d;
    font-weight: 600;
  }
}
.goodimg {
  width: 25px;
  height: 25px;
  margin-right: 5px;
  border-radius: 7px;
}
</style>